<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>基本使用</title>
</head>
<body>
<!--
    vue使用组件的三大步骤
        1。定义组件（创建组件）
        2。注册组件
        3。使用组件（写组件标签）

        1》如何定义一个组件
            使用vue.extend(option)创建 其中option和new vue（option）时传入的那个optiion几乎一样、
            区别在于
                1，el配置不要写 ：---最终所有的组件都要经过一个vm来管理  有vm的el来决定服务与那个容器
                2。data必须写为函数：---避免组件复用时，数据存在应用关系
                备注：使用 template 可以来配置组件结构

        2》如何注册组件
            1。局部注册：靠 new vue的时候传入 components{}选项
            2。全局注册：靠   Vue.component('组件名',组件)

        3》使用组件
            编写组件标签


-->
      <div id="root">
          <Hello></Hello>
          <xuexiao></xuexiao>
        <hr>
          <xuesheng></xuesheng>
      </div>

      <div id="root2">
        <Hello></Hello>
      </div>
    <script>
      //1。创建组件
    const school=Vue.extend({
        //el:'',     不要谢el配置项  因为所有组件最终都会给一个mv管理   由vm决定服务与那个容器
      template:'<div> <h3>学校：{{school}}</h3>\n' +
              '        <h3>地址：{{dizhi}}</h3></div>>',
      data() {
       return { school:'超神学院' , dizhi:'扭曲丛林',}

      }
    })
      const student=Vue.extend({
        template:'<div><h3>学生：{{student}}</h3>\n' +
                '        <h3>年龄：{{age}}</h3></div>>',
        data() {
          return {student:'赵信', age:20}

        }
      })

      const hello=Vue.extend({
          template:'<div><h2>{{name}}</h2>\n' +
              '        </div>>',
          data() {
              return {name:'你好符文大陆'}

          }
      })

        //注册全局组件
      Vue.component('hello',hello)
      new Vue({
        el: '#root',
        //2.注册组件（局部）
        components:{
          xuexiao: school,
          xuesheng: student
        }
      })
      new Vue({
          el: '#root2'
      })
    </script>
</body>
</html>